<template>
    <div class="ls-home">
        <el-row :gutter="16" type="flex" class="ls-home__top col-stretch">
            <el-col :span="6">
                <div class="ls-card ls-top__store">
                    <div class="title weight-500">平台信息</div>
                    <div class="content">
                      <div class="store-name normal sm flex p-b-15">
                        <span class="label m-r-40">平台名称：</span>
                        <span>{{indexData.platform_info.name}}</span>
                      </div>
                      <div class="store-status normal m-t-14 flex">
                        <span class="label m-r-40">系统版本：</span>
                        <span>{{indexData.platform_info.system_version}}</span>
                      </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="ls-card ls-top__data">
                    <div class="title">
                        今日数据
                        <span class="xs muted m-l-10 weight-400">更新时间{{indexData.update_time||'-'}}</span>
                    </div>
                    <div class="content">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <div class="lighter">营业额</div>
                                <div class="m-t-8 font-size-30">{{indexData.accumulated_data.all_shop_order_amount}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="lighter">商城数量</div>
                                <div class="m-t-8 font-size-30">{{indexData.accumulated_data.shop_count}}</div>
                            </el-col>
                            <el-col :span="6">
                                <div class="lighter">成交单数</div>
                                <div class="m-t-8 font-size-30">{{indexData.accumulated_data.all_shop_order_count}}
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="lighter">用户人数</div>
                                <div class="m-t-8 font-size-30">{{indexData.accumulated_data.all_shop_user_count}}</div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="16" class="ls-home__rank  m-t-16">
            <el-col :span="12">
                <div class="ls-card">
                    <div class="title flex">
                        <span class="inline line"></span>
                        商城用户排行
                    </div>
                    <div class="content">
                        <el-table :data="topUser" size="mini">
                            <el-table-column label="排名" min-width="70">
                                <template slot-scope="scope">
                                    <div class="icon" style="background:#F86056;color:#fff" v-if="scope.$index == 0">
                                        {{scope.$index+1}}</div>
                                    <div class="icon" style="background:#FC8D2E;color:#fff" v-if="scope.$index == 1">
                                        {{scope.$index+1}}</div>
                                    <div class="icon" style="background:#FCBC2E;color:#fff" v-if="scope.$index == 2">
                                        {{scope.$index+1}}</div>
                                    <div class="icon" v-if="scope.$index >= 3">{{scope.$index+1}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="商城名称" min-width="300" show-overflow-tooltip prop="name">
                            </el-table-column>
                            <el-table-column prop="user_count" label="用户人数">
                            </el-table-column>
                        </el-table>

                        <div class="flex row-center m-t-20" v-if="topUser.length">
                            <el-pagination background @current-change="getWorkbenchTopUserData"
                                layout="prev, pager, next" :total="topUserCount">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="ls-card">
                    <div class="title flex">
                        <span class="inline line"></span>
                        商城营业额排行
                    </div>
                    <div class="content">
                        <el-table :data="topAmount" size="mini">
                            <el-table-column label="排名" min-width="70">
                                <template slot-scope="scope">
                                    <div class="icon" style="background:#F86056;color:#fff" v-if="scope.$index == 0">
                                        {{scope.$index+1}}</div>
                                    <div class="icon" style="background:#FC8D2E;color:#fff" v-if="scope.$index == 1">
                                        {{scope.$index+1}}</div>
                                    <div class="icon" style="background:#FCBC2E;color:#fff" v-if="scope.$index == 2">
                                        {{scope.$index+1}}</div>
                                    <div class="icon" v-if="scope.$index >= 3">{{scope.$index+1}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="商城名称" min-width="300" prop="name" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="sum_amount" label="销售额">
                            </el-table-column>
                        </el-table>

                        <div class="flex row-center m-t-20" v-if="topAmount.length">
                            <el-pagination background @current-change="getWorkbenchTopAmountData"
                                layout="prev, pager, next" :total="topAmountCount">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {
  apiWorkbenchIndex,
  apiWorkbenchTopAmount,
  apiWorkbenchTopUser
} from '@/api/home'

@Component
export default class Home extends Vue {
    indexData: object = {
      platform_info: {},
      accumulated_data: {}
    };

    topAmount: Array<Object> = [];
    topAmountCount = 0;

    topUser: Array<Object> = [];
    topUserCount = 0;

    // 获取工作台数据
    async getWorkbenchIndexData ():Promise<void> {
      const res: object = await apiWorkbenchIndex()
      this.indexData = res
    }

    // 获取工作台营业额排名
    async getWorkbenchTopAmountData (page: number):Promise<void> {
      const res: object = await apiWorkbenchTopAmount({
        page_no: page,
        page_size: 10
      })
      this.topAmount = (res as any).lists
      this.topAmountCount = (res as any).count
    }

    // 获取工作台商城排名
    async getWorkbenchTopUserData (page: number):Promise<void> {
      const res: object = await apiWorkbenchTopUser({
        page_no: page,
        page_size: 10
      })
      this.topUser = (res as any).lists
      this.topUserCount = (res as any).count
    }

    goPage (url: string): void {
      this.$router.push(url)
    }

    created (): void {
      this.getWorkbenchIndexData()
      this.getWorkbenchTopAmountData(1)
      this.getWorkbenchTopUserData(1)
    }
}
</script>
<style lang="scss" scoped>
.ls-card {
    .title {
        font-size: 14px;
        font-weight: bold;
        padding-bottom: 20px;
        border-bottom: 1px solid $--background-color-base;
        .line {
            width: 3px;
            height: 16px;
            margin-right: 10px;
            background: $--color-primary;
        }
    }
    .content {
        margin-top: 20px;
    }
}
.icon {
    width: 25px;
    height: 25px;
    color: #333;
    border-radius: 2px;
    background: #f5f5f5;
    font-family: "PingFang SC";
    font-weight: normal;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
}
.ls-home {
    .ls-home__top {
        .ls-top__store {
            .store-name {
              border-bottom: 1px solid $--background-color-base;
            }
            .label {
                flex: none;
                color: $--color-black;
            }
        }
        .ls-top__data {
            height: 100%;
            box-sizing: border-box;
        }
    }
}

// 分页
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .el-pager li,
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: none;
    border: 1px solid #f2f2f2;
}
/deep/ .el-pagination.is-background .btn-prev:hover,
/deep/ .el-pagination.is-background .btn-next:hover,
/deep/ .el-pagination.is-background .el-pager li:hover {
    border: 1px solid $--color-primary;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    color: $--color-primary;
    border: 1px solid $--color-primary;
}
</style>
